<template>
    <h2>vue列表渲染</h2>
    <ol>
        <li v-for="item in nameArry">{{ item }}</li>
        
    </ol>
    <table class="table table-border" border="1">
        <thead>
            <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="iten in info">
            <td>{{ iten.name }}</td>
            <td>{{ iten.age }}</td>
            <td>{{ iten.sex }}</td>
            <td>{{ iten.phone }}</td>
            <td>操作</td>
        </tr>
        </tbody>
        
    </table>
</template>

<script setup lang="ts">
import { ref } from 'vue';


const nameArry:string[]=["张三","李四","王五","赵六"]

const info=[{
    name:"张三",
    sex:"男",
    age:13,
    phone:"1787883223432"
},
{
    name:"李四",
    sex:"女",
    age:16,
    phone:"1787883223445"
},
{
    name:"王五",
    sex:"女",
    age:17,
    phone:"1787883223445"
},
{
    name:"六iui",
    sex:"男",
    age:29,
    phone:"1787883223445"
},
]
</script>

<style scoped>

</style>